<template>
	<view>
		<view class="mask" @click="on_close">
		</view>
		<view class="pay-content" v-if="is_init">
			<view class="flex j-b p-20 bb">
				<text class="f32 w800">收银台</text>
				<view class="" @click="on_close">
					<text>X</text>
				</view>
			</view>
			<view @click="on_select(index)" class="p3 flex j-b a-c bb" v-for="(item,index) in pay_list" :key="index">
				<view class="flex a-c ">
					<image class="q_y" style="width: 50rpx;height: 50rpx;" :src="home_url + item.icon"></image>
					<text class="ml2" style="color: #333;">{{item.name}}</text>
				</view>
				<view class="flex a-c j-c  " :class="index==pay_index?'pay-select-i':'pay-select' ">
					<text v-if="index==pay_index" class="cred  ">✓</text>
				</view>
			</view>
			<view class="p3" style="color: #A9A9A9;">
				<text class="f28">应付金额:</text>
				<text class="cred ml1">{{pay_find.money/100}}</text>
				<text class="f-26 ml1">元</text>
			</view>
			<view class="flex j-c p3">
				<view @click="on_pay" class="flex j-c a-c button_bg" style="width: 90%;height: 80rpx;">
					<text>立即支付</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "b-wei-pay",
		props: {
			//支付成功 跳转的页面
			//没有值 则不跳转  返回一个成功方法 @confirm 
			jump_url: {
				type: [String, Number],
				default: ''
			},
			//跳转类型 
			// redirectTo 关闭当前页面，跳转到应用内的某个页面。
			// switchTab  跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。
			jump_type: {
				type: [String, Number],
				default: 'redirectTo'
			},
			pay_find: {
				type: [Object],
				default: {}
			},
			alert: {
				type: [String, Number],
				default: ''
			},
			value: {
				type: [String, Number],
				default: ''
			},
			title: {
				type: [String, Number],
				default: ''
			},
			li: {
				type: Array,
				default () {
					return [];
				}
			},
			placeholder: {
				type: [String, Number],
				default: ''
			},
			type: {
				type: String,
				default: 'error'
			},
			mode: {
				type: String,
				default: 'base'
			},
			title: {
				type: String,
				default: ''
			},
			content: {
				type: String,
				default: ''
			},
			beforeClose: {
				type: Boolean,
				default: false
			},
			cancelText: {
				type: String,
				default: ''
			},
			confirmText: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				pay_list: [],
				pay_index: -1,
				home_url:'',

				is_init: false
			}
		},
		created() {
			this.code = '';
			this.pay_init();

		},
		methods: {
			on_pay() {

				let that = this;
				if (this.pay_index == -1) {
					uni.showToast({
						title: '请选择支付方式',
						icon: 'error'
					})
					return
				}
				uni.showLoading({
					title: '启动支付中...',
					mask: true
				})
				// #ifdef MP-WEIXIN
				wx.login({
					success(ret) {
						that.code = ret.code;
						that.ajax_pay();
					}
				})
				return
				// #endif
				// #ifdef MP-ALIPAY

				my.getAuthCode({
					scopes: 'auth_user',
					success: res => {
						that.code = res.authCode;
						that.ajax_pay();
					},
					fail: err => {
						console.log('my.getAuthCode 调用失败', err)
					}
				});
				return
				// #endif

				that.ajax_pay();
			},
			ajax_pay() {
				let that = this;

				let requestParams = {
					order_id: this.pay_find.id,
					pay_id: this.pay_id, //选择的支付方式
					pay_code: this.pay_code, //选择的支付标识
					code: this.code
				};

				this.Http.post('/plugin.php/luyouzujiditu/api/Payorder/pay_init', requestParams).then(ret => {
					console.log("ret1: " + JSON.stringify(ret));

					uni.hideLoading()
					if (ret.status == 200) {
						that.go_pay(ret.data)
						return
					}
					uni.showToast({
						title: ret.msg,
						icon: 'none'
					})

				})
			},
			go_pay(data) {
				let that = this;

				switch (this.pay_code) {
					case 'mp_weixin_pay':
						//微信小程序 微信支付
						this.Pay.mp_weixin_pay(data).then(ret => {
							if (ret == 200) { //支付成功
								that.pay_jump();
							}
						})
						break;
					case 'app_wx_android_pay':
						//app安卓微信支付
						this.Pay.app_wx_pay(data).then(ret => {
							if (ret == 200) { //支付成功
								that.pay_jump();
							}
						})
						break;

					case 'app_wx_ios_pay':
						//app 苹果微信支付
						this.Pay.app_wx_pay(data).then(ret => {
							if (ret == 200) { //支付成功
								that.pay_jump();
							}
						})
						break;

					case 'app_alipay_android_pay':
						//app 安卓在支付宝支付
						this.Pay.app_alipay_pay(data).then(ret => {

							if (ret == 200) { //支付成功
								that.pay_jump();
							}
						})
						break;

					case 'app_alipay_ios_pay':
						//app ios在支付宝支付 
						this.Pay.app_alipay_pay(data).then(ret => {

							if (ret == 200) { //支付成功
								that.pay_jump();
							}
						})
					case 'h5_alipay_pay':
						//h5手机网站支付宝支付
						//打开链接支付 
						let divForm = document.getElementsByTagName('divform')
						if (divForm.length) {
							document.body.removeChild(divForm[0])
						}
						const div = document.createElement('divform')
						div.innerHTML = data // res.data就是sb支付宝返回给你的form
						document.body.appendChild(div)
						document.forms[0].setAttribute('target', '_blank') // 加了_blank可能出问题所以我注释了
						document.getElementById('alipay_submit').submit()
						//获取2秒刷新一次接口 判断是否支付成功
						that.order_time = setInterval(function() {
							that.h5_pay_state();
						}, 2000);

						break;
					case 'h5_weixin_pay':
						//h5手机网站微信支付
						//本窗口打开链接支付
						// window.location.href = data;
						//新窗口
						window.open(data);
						//获取2秒刷新一次接口 判断是否支付成功
						that.order_time = setInterval(function() {
							that.h5_pay_state();
						}, 2000);

						break;
					case 'MP-ALIPAY':
						//支付宝小程序支付
						this.Pay.mp_alipay_pay(data).then(ret => {
							if (ret == 200) { //支付成功
								that.pay_jump();
							}
						})
						break;
					case 'mp_toutiao_douyin_pay':
						//抖音小程序支付 
						this.Pay.mp_toutiao_douyin_pay(data).then(ret => {
							if (ret == 200) { //支付成功
								that.pay_jump();
							}
						})
						break;
					case 'qq_weixin_pay':
						//qq小程序微信支付 
						this.Pay.qq_weixin_pay(data).then(ret => {
							if (ret == 200) { //支付成功
								that.pay_jump();
							}
						})
						break;

					default:
						// default的代码块
				}
			},
			//h5获取是否支付成功
			h5_pay_state() {
				let that = this;
				let requestParams = {
					order_id: this.pay_find.id,
					pay_id: this.pay_id, //选择的支付方式
					pay_code: this.pay_code, //选择的支付标识
					code: this.code
				};
				this.Http.post('/plugin.php/luyouzujiditu/api/Payorder/pay_state', requestParams).then(ret => {
					if (ret.status == 200 && ret.data > 0) {
						clearInterval(that.order_time);
						that.pay_jump();
					}
				})
			},
			//支付成功
			pay_jump() {
				console.log("'跳转': " + JSON.stringify('跳转'));
				this.$emit('confirm');
				uni.redirectTo({
					url: '/pages/luyouzujiditu/pay_ok/pay_ok' + '?jump_type=' + this.jump_type + '&jump_url=' + this
						.jump_url
				})
			},
			on_select(index) {
				this.pay_index = index;
				this.pay_id = this.pay_list[index]['id'];
				this.pay_code = this.pay_list[index]['code']; //支付标识
			},
			pay_init() {
				let that = this;


				this.Http.post('/plugin.php/luyouzujiditu/api/Paypaymethod/lists', {}).then(ret => {

					this.home_url = ret.url;
					if (ret.status == 200) {
						let list = ret.data.list;
						this.pay_list = list;
						that.is_init = true;

					}
				})
			},
			on_close() {
				clearInterval(this.order_time);
				this.$emit('close')
			},
			onplay() {
				this.$emit('confirm', this.val)
			},

		}
	}
</script>
<style lang="scss">
	.mask {
		width: 750rpx;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.5);
		position: fixed;
		top: 0;
		bottom: 0;
		z-index: 999;
	}

	.pay-content {
		width: 750rpx;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		z-index: 89999;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		min-height: 300rpx;
		padding: 0 20rpx;
	}

	.pay-select {
		width: 35rpx;
		height: 35rpx;
		border: solid 2rpx #333;
		border-radius: 96rpx;
	}

	.pay-select-i {
		width: 35rpx;
		height: 35rpx;
		border: solid 2rpx red;
		border-radius: 96rpx;
	}
</style>